<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">
        <div>
<!--            <router-link to="/user">用户列表</router-link>-->
<!--            <router-link to="/book">书籍列表</router-link>-->

<!--            <router-link :to={path:"/user"}>用户列表</router-link>-->
<!--            <router-link :to={path:"/book"}>书籍列表</router-link>-->

            <router-link :to={name:"user"}>用户列表</router-link>
            <router-link :to={name:"book"}>书籍列表</router-link>

        </div>
        <router-view></router-view>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>

    <script>
        const User = Vue.component("user",{
            template:`<h1>用户列表</h1>`
        })

        const Book = Vue.component("book",{
            template:`<h1>书籍列表</h1>`
        })

        const router = new VueRouter({
            routes:[
                {path:"/",redirect:"/user"},
                {path:"/user",name:"user",component:User},
                {path:"/book",name:"book",component:Book},
            ]
        })

        new Vue({
            el:"#app",
            router:router
        })
    </script>
</body>
</html>